<template>
  <view class="login">
    <view class="login-tel">
      <view class="tel-main">
		  <view class="logo">
		  	<image src="../../static/bjlogo.jpg" alt="">
		  </view>
        <view class="login-form">
          <view class="login-user">
          <text class="user-text">邮箱:</text>
    <input type="text" v-model="email" placeholder="请输入邮箱">
			</view>
		<view v-if="!isValidEmail(email)" class="tip">请输入邮箱</view>
		</view>
      </view>
      <view class="tel" @tap='gonextcode'>保存</view>
    </view>
  </view>
    </view>
  
</template>

<script>
	import {mapMutations} from 'vuex';
	import $http from '@/common/api/request.js'//引入request组件


export default {
  data() {
    return {
     email: '',
	  userId:'',
	  phone:'',
	  user:[],
	users:[],
      showTip: false,
      rules: {
        email: {
          rule: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
          msg: "请输入正确的邮箱格式"
        },
       
      },
    }
  },
  mounted() {

  	this.gonextcode();
  	//全局变量用户ID
  //	this.userId = uni.getStorageSync('userId');
  		this.user = uni.getStorageSync('user');
  		//this.userName = uni.getStorageSync('user.name');
  		console.log('5551',this.user.id)
  	//this.address();
  },
  methods: {
  


/////////////////////////////////////////////////////////////////////////
  
///加载
      isValidEmail(email) {
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          return emailRegex.test(email);
        },
		validate(key){
			let bool=true;
			if(  !this.rules[key].rule.test(this[key])){
				uni.showToast({
					title:this.rules[key].msg,
					icon:"none"
				})
				bool=false;
				return false;
			}
			return bool;
		},
gonextcode() {
		if (!this.validate('email')) return;
  if (!this.validate('email')&&!this.email) {
    this.showTip = true; // 显示提示信息
  } else {
    this.showTip = false; // 隐藏提示信息


 var email = this.email;
  console.log('997',this.user.Name)
  var userId = this.user.id;
  console.log('669', this.user.id)

  var url = 'http://43.136.172.73/api/v1/user/upgrade_email';
  var id=this.user.id;
  url += '?email=' + encodeURIComponent(email) + '&userId=' + encodeURIComponent(userId);

  uni.request({
    url: url,
    method: 'PUT',
    header: {
      'Content-Type': 'application/json',
      "Content-Type": "application/x-www-form-urlencoded",
      'Authorization': 'sfsdf',
    },
    success: (res)=> {
      // 请求成功处理
      console.log('请求成功！',res);
	uni.request({
	  url: 'http://43.136.172.73/api/v1/user/load',
	  method: 'GET',
	  data: { 
	  	phone: this.user.phone, //给后端给的phone
	  },
	  header: {
	    'Content-Type': 'application/json',
	    'Content-Type': 'application/x-www-form-urlencoded',
	    'Authorization': 'sfsdf'
	  },
	  success: (res) => {
		  	console.log('5555:', this.user.phone)
	console.log('99966:', res.data)
	this.users = res.data.data;
	 console.log('6666:', this.users.email)
   uni.showToast({
		          title: '修改成功，请重新登陆查看最新信息',
		          icon: 'none',
		          duration: 2000
		        });
	setTimeout(() => {
				  uni.navigateTo({
				    url: '../set/set?email=' + this.users.name
				  });
				}, 2000);
	
	  },
	  fail: (err) => {
	    console.error('Error:', err)
	  }
	})
    },
    fail: (err)=> {
      // 请求失败处理
      console.log('请求失败！', err);
    }
  });
  }
/////////////////////////////////////////////////////////////////////////
  
///加载

		
    }
  }
}
</script>

<style>
.login-tel {
  padding: 30rpx;
  width: 100vw;
  height: 100vh;
}

.tel-main {
  padding: 0rpx 20rpx;
  padding-top: 0rpx;
}
.logo{
	padding-top: 70rpx;
	padding-bottom: 80rpx;
	display: flex;
	justify-content: center;
	
}
.tel {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #FFFF;
  background-color: #49BDFB;
  border-radius: 40rpx;
}

.login-form{

}

.login-user{
position: relative;
  display: flex;
 align-items: center;
  height: 100rpx;
  line-height: 100rpx;
  text-align: left;
  color:black;
  background-color: #f7f7f7;
  border-radius: 40rpx;
  padding: 20rpx 0;
  margin: 40rpx 0rpx;
  border-bottom: 2rpx solid #f7f7f7;
}


.user-text{
  margin-left: 20rpx;
  padding-right: 10rpx;
  font-size: 31rpx;
  text-align: center;
  align-items: center;
  color: black;
  font-weight: 400;
}

.show-pwd {
  position: absolute;
  right: 50rpx;
  color: #49BDFB;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  cursor: pointer;

}

.no-border {
outline: none;
  border:none ;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx; 
}

.btn {
  margin-left: -20rpx;
  margin-right: -20rpx;
  padding: 50rpx;
}
.tip{
	color: red;
}
</style>

